<template>
    <div>
        <el-dialog @close="closeDialog" title="角色详情" v-model="syStore.rolesFlag" width="769px">
            <el-form v-loading="loading" :model="detailsData" label-width="120px">
                <el-form-item label="类型："  style="width: 50%">
                     <div>{{ detailsData.type }}</div>
                </el-form-item>
                <el-form-item label="名称：" style="width: 50%">
                    {{ detailsData.name }}
                </el-form-item>
                <el-form-item label="标签：" style="width: 50%">
                    {{ detailsData.label }}
                </el-form-item>
                <el-form-item label="描述：" style="width: 50%">
                    {{ detailsData.desc }}
                </el-form-item>
                <el-form-item label="创建时间：" style="width: 50%">
                    {{ detailsData.created_at }}
                </el-form-item>
                <!-- <el-form-item label="角色：" style="width: 100%">
                    <div style="margin-right: 20px">
                        <el-scrollbar style="height: 120px">
                        <el-tag
                            style="margin-right: 5px"
                            size="small"
                            v-for="(item, index) in detailsData.role"
                            :key="index"
                            >{{ item }}</el-tag
                        >
                        </el-scrollbar>
                    </div>
                </el-form-item> -->
            </el-form>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
    import {ref,reactive,onMounted,defineExpose} from "vue"
   import {rolesApi} from "/@/api/system/roles/index"
   import { systemStore } from "/@/stores/system";
	const syStore = systemStore()
    const roleApi = rolesApi();
    const detailsData =ref({
        avatar_url:null,
        username:"",
        name:"",
        mobile:"",
        email:"",
        enabled:"",
        created_at:""
    })
    const loading = ref<Boolean>(false)
    const getRoleDetail = (async ()=>{
        loading.value =true
        let res =await roleApi.getRolesDetail({id:syStore.rolesId});
        if(res.isSuccess){
            res.returnData.enabled=res.returnData.enabled==1?'启用':"禁用"
            detailsData.value = res.returnData
            loading.value =false
        }
    })
    const closeDialog = () =>{
        syStore.rolesFlag = false;
        syStore.rolesId = "";
        detailsData.value = {
            avatar_url:null,
            username:"",
            name:"",
            mobile:"",
            email:"",
            enabled:"",
            created_at:""
        }
    }
    defineExpose({
        getRoleDetail
    })

    onMounted(()=>{
    })
</script>